<template>
    <div class="container">
        <dv-box title="实时监控">
            <div class="videoBox">
                <div class="control">
                    <!-- 设备列表 -->
                    <div class="title">
                        <el-row>
                            <el-col :span="22">
                                <span>设备列表</span>
                            </el-col>
                            <el-col :span="2">
                                <i @click="upDataList" style="cursor:pointer;color:#409EFF;" class="el-icon-refresh-right"></i>
                            </el-col>
                        </el-row>
                    </div>
                    <div class="deviceList"  v-loading="rightFlag">
                        <div v-if="videoList.length !== 0">
                            <p class="playList" :style="{background:active == index ? 'rgba(238, 238, 238, 0.4)' : ''}"  v-for="(item, index) in videoList" :key="index" @click="palyVideo(item,index)">
                                <i class="el-icon-video-camera"></i>
                                <span>{{item.videoname}}</span>
                            </p>
                            <!-- <el-tree
                            :data="videoList"
                            node-key="id"
                            icon-class="el-icon-video-camera"
                            :default-expanded-keys="[videoList[0].id]"
                            :props="defaultProps"
                            accordion
                            @node-click="handleNodeClick">
                            </el-tree> -->
                        </div>
                        <div v-else>
                            <el-empty description="暂无数据"></el-empty>
                        </div>
                    </div>
                    <!-- 云台 -->
                    <div class="holder">
                        <el-card class="box-card">
                            <div class="pie">
                                <div @click="upData(true)" class="center_blue">
                                    <img class="center_play" src="../../../../assets/images/gongneng.png">
                                </div>
                                <div class="circlebox">
                                        <div @mousedown="clickDown(0)" @mouseup="clickUp(0)" :style="{'color':'#409EFF','font-size':size==0?'42px':'45px'}" class="circle circle2"><div style="transform: rotate(-25deg);left: -15px;" class="borbox"></div> <div class="borbox" style="transform: rotate(25deg);right: -15px;"></div> <i class="el-icon-caret-top"></i></div>
                                        <div @mousedown="clickDown(i)" @mouseup="clickUp(i)" :style="{'color':'#409EFF','font-size':size==i?'42px':'45px'}" v-for="i in 6" :key="i" :class="`circle circle${i+2}`"><div style="transform: rotate(-25deg);left: -15px;" class="borbox"></div><i style="font-size: 45px;" class="el-icon-caret-top"></i></div>
                                        <div @mousedown="clickDown(7)" @mouseup="clickUp(7)" :style="{'color':'#409EFF','font-size':size==7?'42px':'45px'}" class="circle circle9"><i style="font-size: 45px;" class="el-icon-caret-top"></i></div>
                                </div>
                                <!-- <div class="center" @click="upData"></div> -->
                            </div>
                            <!-- 变焦 -->
                            <el-row class="zoom">
                                <el-col :span="3"><i @click="zoomMinus"  @mouseup="clickUpZoom(10)" class="el-icon-zoom-out"></i></el-col>
                                <el-col :span="19"><el-slider v-model="value1" :step="2" :max="100"></el-slider></el-col>
                                <el-col :span="2" style="margin-left: 12px;"><i @click="zoomAdd" @mouseup="clickUpZoom(11)" class="el-icon-zoom-in"></i></el-col>
                            </el-row>
                        </el-card>
                    </div>
                </div>
                <div class="videos">
                    <div class="selectSpilt">
                        <!-- 声音 -->
                        <img @click="clickVoice" :src="voiceImg" alt="">
                        <!-- 分屏 -->
                        <div>
                                <i @click="allUpdata" class="el-icon-refresh-right"></i>
                                <i class="el-icon-full-screen" @click="setSpilt(1)"></i>
                                <i class="el-icon-menu" @click="setSpilt(4)"></i>
                        </div>
                    </div>
                    <!-- 播放窗口 -->
                    <div v-for="i in spilt" :key="i" class="play-box" :style="liveStyle" :class="{redborder:playerIdx == (i-1)}" @click="videoActive(i)">
                            <div v-if="!videoUrl[i-1].url" style="color: #ffffff;font-size: 30px;font-weight: bold;">{{ i }}</div>
                            <div v-else class="palyVideoBox">
                                <ezvideo v-if="videoUrl[i-1].videotype == 1" videoId="singleVideo" :src="spilt == 1 ? videoUrl[playerIdx].url : videoUrl[i-1].url" :spilt="spilt" :videoVoice="videoVoice"></ezvideo>
                                <videoModel v-if="videoUrl[i-1].videotype == 2" videoId="singleVideo" :src="spilt == 1 ? videoUrl[playerIdx].url : videoUrl[i-1].url" :videoId="spilt == 1 ? videoUrl[playerIdx].id : videoUrl[i-1].id" :videoVoice="videoVoice"></videoModel>
                                <H256Player v-else  :src="spilt == 1 ? videoUrl[playerIdx].url : videoUrl[i-1].url"></H256Player>
                                <div v-if="(spilt !== 1)" class="btndelete"><el-button type="danger" size="mini" icon="el-icon-delete" circle @click="delVideo(i-1)"></el-button></div>
                            </div>
                    </div>
                </div>
            </div>
        </dv-box>
        <dv-box title="AI分析">
            <div class="aibox">
                <dv-scroll-board :config="tableConfig" style="width:100%;height:100%" @click="clickTable"/>
            </div>
        </dv-box>
        <div class="imgPerview" v-if="flag" @click="flag=false">
            <img class="imgbox" :src="url">
            <i class="el-icon-circle-close" @click="flag=false"></i>
        </div>
    </div>
</template>

<script>
import dvBox from "@/components/datav/dv-box.vue";
import { aesDecrypt } from '@/utils/utils';
import videoModel from '@/components/video/video.vue'
import H256Player from '@/components/video/video3.vue'
import ezvideo from '@/components/video/ezvideo.vue'
import moment from 'moment'
export default {
    data(){
        return{
            videoUrl: [
                {id:'',url:null,deviceserial:'',videotype:2},
                {id:'',url:null,deviceserial:'', videotype:2},
                {id:'',url:null,deviceserial:'', videotype:2},
                {id:'',url:null,deviceserial:'', videotype:2},
            ], // 播放地址
            spilt: 4, // 分屏数量
            playerIdx: 0,//激活播放器
            videoList:[],
            defaultProps: {
                children: 'children',
                label: 'channelname'
            },
            value1: 30,
            url:'',
            flag:false,
            rightFlag:false,
            // 表格配置
            tableConfig: {},
            tableData: [],
            active:0,
            size:null,
            ezToken:{},
            videoVoice:true,
            timeFlag:true,
            voiceImg:require('../../../../assets/images/voiceOn.png')
        }
    },
    props:{
        id:{
            type:Number|String,
            default:''
        },
    },
    components:{
        dvBox,
        videoModel,
        ezvideo,
        H256Player
    },
    created(){
        this.getVideoList()
        this.getAiList()
    },
    methods:{
        palyVideo(item,index){
            this.active = index
            this.videoUrl[this.playerIdx].url = ''
            this.ezToken = { token:'', serial:item.devicesn, channelNo:item.channelno, videotype:item.videotype }
            if(item.videotype){
                this.ezToken.token = aesDecrypt(item.videourl).split("?")[1]
                // this.$api.getEZopenToken({appid:item.appid,secret:item.secret}).then(res => {
                // })
                this.videoUrl[this.playerIdx].url =  aesDecrypt(item.videourl)
            }else{
                this.videoUrl[this.playerIdx].url =  aesDecrypt(item.videourl)
            }
            this.videoUrl[this.playerIdx].id = item.channelno
            this.videoUrl[this.playerIdx].deviceserial = item.devicesn
            this.videoUrl[this.playerIdx].videotype = item.videotype
        },
        // 刷新设备列表
        upDataList(){
           this.getVideoList() 
        },
        // 删除视频
        delVideo(index){
            this.videoUrl[index].deviceserial = ''
            this.videoUrl[index].url = ''
            this.videoUrl[index].id = ''
            this.videoUrl[index].videotype = 2
        },
        videoActive(i){
            this.playerIdx = (i-1)
        },
        // 树结构-播放视频
        handleNodeClick(item) {
            if(item.children) return false
            this.videoUrl[this.playerIdx].url = ''
            this.ezToken = { token:'', serial:item.deviceserial, channelNo:item.channelno, videotype:item.videotype }
            if(item.videotype == 1){
                this.videoUrl[index].url =  `ezopen://open.ys7.com/${item.deviceserial}/${item.channelno}.live?${res.data}`
            }else if(item.videotype == 2){
                this.videoUrl[index].url =  `http://47.106.166.98:9082/rtp/${item.deviceserial}_${item.channelno}.live.flv`
            }else{
                this.videoUrl[index].url = item.videourl
            }
            this.videoUrl[this.playerIdx].id = item.channelno
            this.videoUrl[this.playerIdx].deviceserial = item.deviceserial
            this.videoUrl[this.playerIdx].videotype = item.videotype
        },
        // 设置分屏数量
        setSpilt(num){
            this.spilt = num
        },
        // 视频集体刷新
        allUpdata(){
            let arr = this.videoUrl
            this.videoUrl = [
                {id:'',url:null,deviceserial:'',videotype:2},
                {id:'',url:null,deviceserial:'', videotype:2},
                {id:'',url:null,deviceserial:'', videotype:2},
                {id:'',url:null,deviceserial:'', videotype:2},
            ]
            setTimeout(() => {
                this.videoUrl = arr
            })
        },
        // 全部声音控制
        clickVoice(){
            this.videoVoice = !this.videoVoice
            this.voiceImg = this.videoVoice ? require('../../../../assets/images/voiceOn.png') : require('../../../../assets/images/voiceOff.png')
        },
        async zoomMinus(){
            if(this.ezToken.videotype == 1){
                this.clickEzopen(10)
                this.clickUp(10)
            }else{
                if(this.ezToken.serial&&this.ezToken.channelNo){
                    await this.clickControl('zoomout',this.ezToken.serial+'/'+this.ezToken.channelNo)
                    await this.clickControl('stop',this.ezToken.serial+'/'+this.ezToken.channelNo)
                }
            }
        },
        async zoomAdd(){
            if(this.ezToken.videotype == 1){
                this.clickEzopen(11)
                this.clickUp(10)
            }else{
                if(this.ezToken.serial&&this.ezToken.channelNo){
                    await this.clickControl('zoomin',this.ezToken.serial+'/'+this.ezToken.channelNo)
                    await this.clickControl('stop',this.ezToken.serial+'/'+this.ezToken.channelNo)
                }
            }
        },
        clickUpZoom(val){
            // this.clickUp(val)
        },
        upData(){
            if(this.timeFlag){
                let url = this.videoUrl[this.playerIdx].url
                this.videoUrl[this.playerIdx].url = ''
                this.timeFlag = false
                setTimeout(() => {
                    this.videoUrl[this.playerIdx].url = url
                    this.timeFlag = true
                }, 1000);
            }
        },
        // 鼠标按下 开始云台移动
        clickDown(ifSwitch){
            this.size = ifSwitch
            let params = this.videoUrl[this.playerIdx]
            if(params.url){
                // videotype:(1:萤石云设备 ; 2:ynlk设备)
                if(params.videotype == 1){
                    this.ezToken.channelNo = params.id
                    this.ezToken.token = params.url.split("?")[1]
                    this.ezToken.serial = params.deviceserial
                    // 获取token
                    this.clickEzopen(ifSwitch)
                }else{
                    // 调用YNLK云台接口
                    this.ezToken = { token:'', serial:params.deviceserial, channelNo:params.id, videotype:params.videotype }
                    if( params.deviceserial && params.id ){
                        this.clickControl(this.direction(ifSwitch)[2],params.deviceserial+'/'+params.id)
                    }
                }
            }
        },
        // 鼠标抬起 停止云台移动
        clickUp(ifSwitch){
            this.size = null
            let { token, serial, channelNo, videotype } = this.ezToken
            if(this.videoUrl[this.playerIdx].videotype == 1){
                this.$api.getPtzStop({accessToken:token,deviceSerial:serial,channelNo:channelNo,direction:this.direction(ifSwitch)[1]}).then(res => {
                    console.log(res)
                }).catch(err => {
                    console.log(err)
                })
            }else{
                if(serial&&channelNo){
                    this.clickControl('stop',serial+'/'+channelNo)
                }
            }
        },
        // 云台控制-萤石云
        clickEzopen(ifSwitch){
            /*
                accessToken：token 
                deviceSerial:设备序列号 
                channelNo:通道号 
                direction:旋转方向
                speed:旋转速度（0：慢 ；1：适中；2：快）
            */
            this.$api.getPtzStart({accessToken:this.ezToken.token,deviceSerial:this.ezToken.serial,channelNo:this.ezToken.channelNo,direction:this.direction(ifSwitch)[1],speed:1}).then(res => {
                if(res.code != 200){
                    this.$message.warning('该设备暂不支持云台控制')
                }
            })
        },
        // 云台控制-ynlk
        clickControl(direction,path){
            /*
                command:旋转角度
                path:设备号 + 通道号
                horizonSpeed：
                verticalSpeed:
                zoomSpeed:
            */ 
            this.$datav.ptzControl({command:direction,horizonSpeed: this.value1,verticalSpeed: this.value1,zoomSpeed: this.value1},path).then(res => {
                console.log(res)
            }).catch((err) => {console.log(err)}) 
        },
        // 云台方向
        direction(x){
            // 0-上，1-下，2-左，3-右，4-左上，5-左下，6-右上，7-右下，8-放大，9-缩小，10-近焦距，11-远焦距 萤石云
            // up down left right ynlk
            switch(x){
                case 0 :
                return {1:'0', 2:'up'};
                case 1 :
                return {1:'4', 2:''};
                case 2 :
                return {1:'2', 2:'left'};
                case 3 :
                return {1:'5', 2:''};
                case 4 :
                return {1:'1', 2:'down'};
                case 5 :
                return {1:'7', 2:''};
                case 6 :
                return {1:'3', 2:'right'};
                case 7 :
                return {1:'6', 2:''};
                case 8 :
                return {1:'8', 2:''};
                case 9 :
                return {1:'9', 2:''};
                case 10 :
                return {1:'10', 2:'zoomout'};
                case 11 :
                return {1:'11', 2:'zoomin'};
            }
        },
        // 表格点击
        clickTable(item){
            this.url = this.tableData[item.rowIndex] 
            this.flag = true
        },
        // ai列表
        getAiList(){
            this.$datav.getAiList({projectid:this.id,today:moment().format('YYYY-MM-DD')}).then(res => {
                if(res.data.length !== 0){
                    let arr = []
                    this.url = res.data[0].violationpic
                    res.data.map(item => {
                        this.tableData.push(item.violationpic)
                        arr.push([`<img style="width: 65px; height: 80px; cursor: pointer;" src=${item.violationpic}>`,item.eventtype,item.eventtime])
                    })
                    this.tableConfig = {
                        header: ['预警图片', '预警类型', '预警时间'],
                        index: true,
                        rowNum:5,
                        headerHeight:40,
                        columnWidth:[80,130,80],
                        headerBGC:'#F2F3F5',
                        oddRowBGC:'rgb(255, 255, 255,0)',
                        evenRowBGC:'rgb(255, 255, 255,0)',
                        data:arr
                    }
                }
            })
        },
        // 视频列表
        getVideoList(){
            this.rightFlag = true
            this.$datav.getVideoList({projectid:this.id,today:moment().format('YYYY-MM-DD')}).then(res => {
                if(res.data){
                    this.videoList = res.data
                    this.videoUrl.map((item,index) => {
                        if(this.videoList[index]){
                            if(this.videoList[index].videotype == 1){
                                this.videoUrl[index].url =  aesDecrypt(this.videoList[index].videourl)
                            }else if(this.videoList[index].videotype == 2){
                                this.videoUrl[index].url =  `http://47.106.166.98:9082/rtp/${this.videoList[index].devicesn}_${this.videoList[index].channelno}.live.flv`
                            }else{
                                this.videoUrl[index].url = this.videoList[index].videourl
                            }
                            this.videoUrl[index].deviceserial = this.videoList[index].devicesn
                            this.videoUrl[index].videotype = this.videoList[index].videotype
                            this.videoUrl[index].id = this.videoList[index].channelno
                        }
                    })
                    
                    this.rightFlag = false
                }else{
                    this.rightFlag = false
                }
            })
            // this.$datav.getVideoPlayList({projectcode:this.id,today:moment().format('YYYY-MM-DD')}).then(res =>{
            //     if(res.data && res.data.length !== 0){
            //         let arr = [], sortList = [], filtList = []
            //         res.data.filter((item,i) => {
            //             arr.push(item.blockname)
            //         })
            //         sortList = [...new Set([...arr])]
            //         sortList.map(num => {
            //             filtList.push( { id:num, channelname:'标段:'+num, children:[] } )
            //         })
            //         filtList.map(filt => {
            //             res.data.map(res => {
            //                 if(filt.id == res.blockname){
            //                     filt.children.push(res)
            //                 }
            //             })
            //         })
            //         this.videoList = filtList
            //         this.rightFlag = false
            //     }
            //     setTimeout(() => {
            //         this.rightFlag = false
            //     }, 5000);
            // })
        }
        },
        computed: {
            liveStyle() {
                let style = {width: '100%', height: '100%'} 
                switch (this.spilt) {
                    case 4:
                    style = {width: '49%', height: '49%'}
                    break
                    case 9:
                    style = {width: '32%', height: '32%'}
                    break
                }
                this.$nextTick(() => {
                    for (let i = 0; i < this.spilt; i++) {
                        const player = this.$refs.player
                        player && player[i] && player[i].updatePlayerDomSize()
                    }
                })
                return style
            }
        },
}
</script>

<style lang='scss' scoped>
.container{
    width: 100%;
    height: 100%;
    display: grid;
    grid-template-columns: 2.2fr 0.8fr;
    grid-gap:0 10px;
    .videoBox{
        display: flex;
        height: 100%;
        .control{
            width: 30%;
            height: 100%;
            position: relative;
            .title{
                width: 100%;
                height: 30px;
                line-height: 30px;
                background-color: #fff;
                text-align: center;
                position: absolute;
                top: 0;
            }
            .deviceList{
                width: 100%;
                height: 430px;
                background-color: #fff;
                padding-top: 30px;
                overflow-x: hidden;
                .playList{
                    display: flex;
                    align-items: center;
                    margin: 0;
                    padding-left: 5px;
                    line-height: 30px;
                    font-size: 18px;
                    i{
                        margin-right:10px;
                    }
                    span{
                        font-size: 15px;
                    }
                }
                .playList:hover{
                    background: rgba(238, 238, 238, 0.4);
                    cursor: pointer;
                }
            }
            .holder{
                width: 100%;
                height: 43%;
                margin-top: 10px;
                background-color: #fff;
                overflow: hidden;
                .box-card {
                        height: 100%;
                        .zoom{
                            display: flex;
                            align-items: center;
                            i{
                                font-size: 20px;
                                cursor: pointer;
                            }
                        }
                        .pie{
                            position: relative;
                            margin: 20px auto;
                            padding: 0;
                            width: 200px;
                            height: 200px;
                            border-radius: 50%;
                            list-style: none;
                            box-shadow: 0px 5px #0000001c;
                            .center_blue{
                                position: absolute;
                                top: 50%;
                                left: 50%;
                                transform: translate(-50%,-50%);
                                width: 100px;
                                height: 100px;
                                background: #fff;
                                border: 1px solid #CECECE;
                                text-align: center;
                                border-radius: 100px;
                                line-height: 120px;
                                z-index: 3;
                                cursor: pointer;
                            }
                            .circlebox{
                                position: relative;
                                width: 100%;
                                height: 100%;
                                background-color: #FAFBFC;
                                border-radius: 100%;
                                z-index: 1;
                                overflow: hidden;
                                .circle{
                                    position: absolute;
                                    top: 0;
                                    right: 35%;
                                    width: 30%;
                                    height: 50%;
                                    cursor: pointer;
                                    text-align: center;
                                    line-height: 50px;
                                    background-color: #FAFBFC;
                                    img{
                                        position: relative;
                                    }
                                }
                                /* 上 */
                                .circle2{
                                    z-index: 2;
                                }
                                /* 上左 */
                                .circle3{
                                    left: 15%;
                                    top: 8%;
                                    transform: rotate(-45deg);
                                    z-index: 1;
                                }
                                /* 左 */
                                .circle4{
                                    left: 10%;
                                    top: 25%;
                                    transform: rotate(-90deg);
                                    border-top:none;
                                }
                                /* 下左 */
                                .circle5{
                                    left: 17%;
                                    top: 42%;
                                    transform: rotate(-135deg);
                                    z-index: -1;
                                }
                                /* 下 */
                                .circle6{
                                    top: 50%;
                                    transform: rotate(-180deg);
                                    border-top:none;
                                    z-index: -2;
                                }
                                /* 下右 */
                                .circle7{
                                    right: 17%;
                                    top: 42%;
                                    transform: rotate(-225deg);
                                    z-index: -3;
                                }
                                /* 右 */
                                .circle8{
                                    right: 10%;
                                    top: 25%;
                                    transform: rotate(-270deg);
                                    border-top:none; 
                                    z-index: -4;
                                }
                                /* 上右 */
                                .circle9{
                                    right: 17%;
                                    top: 8%;
                                    transform: rotate(-315deg);
                                    z-index: -5;
                                }
                                .borbox{
                                    width: 1px;
                                    height: 200px;
                                    background-color: #CECECE;
                                    position: absolute;
                                    z-index: 999;
                                    bottom: 0;
                                    /* left: -20px; */
                                }
                            }
                        }
                        .center {
                            position: absolute;
                            width: 80px;
                            height: 80px;
                            top: 58px;
                            left: 58px;
                            border-radius: 50%;
                            background: url('../../../../assets/images/gongneng.png') no-repeat center center / 45% 40%;
                            cursor: pointer;
                            color: #1E71DC;
                        }
                }
            }
        }
        .videos{
            width: calc(70% - 10px);
            height: 97%;
            margin-left:10px ;
            background-color: #fff;
            display: flex;
            flex-wrap: wrap;
            justify-content: space-around;
            position: relative;
            .play-box {
                width: 100%;
                height: 97%;
                background-color: #000000;
                border: 2px solid #505050;
                display: flex;
                align-items: center;
                justify-content: center;
                overflow: hidden;
            }
            .palyVideoBox{
                width: 100%;
                height: 100%;
                position: relative;
                .btndelete{
                    position: absolute;
                    top: 10px;
                    right: 10px;
                    z-index: 999;
                    opacity: 0.8;
                    display: none;
                }
            }
            .palyVideoBox:hover .btndelete{
                display: block;
            }
            .selectSpilt{
                position: absolute;
                width: 100%;
                bottom: -4%;
                background: rgba(255, 255, 255);
                height: 40px;
                line-height: 40px;
                font-size: 18px;
                z-index: 999;
                display: flex;
                justify-content: space-between;
                align-items: center;
                img{
                    width: 20px;
                    height: 20px;
                    margin-left: 10px;
                    cursor: pointer;
                }
                i{
                    margin: 0 10px;
                }
                i:hover{
                    color:#409EFF;
                    cursor: pointer;
                }
            }
        }
    }
}
.redborder {
  border: 2px solid red !important;
}
.imgPerview{
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.493);   
    .imgbox{
        position: fixed;
        top: 25%;
        right: 35%;
    }
    .el-icon-circle-close{
        position: fixed;
        top: 5%;
        right: 10%;
        cursor: pointer;
        color: rgb(182, 182, 182);
        font-size: 50px;
    }
}
.aibox{
    height: calc(100vh - 200px) !important;
    overflow: hidden;
}
@include dvScroll
</style>